<template>
  <h3>人员选择器</h3>
  <el-button @click="visible = true">打开</el-button>
  <BasicCrudUserRefer v-model="visible" @submit="handleSubmit"></BasicCrudUserRefer>
  <h3>crud组件参照</h3>
  <basic-crud v-model:formData="formData" :option="option1" ref="basicCrudRef" selectType="radio"
    businessUrl="/permission/userController"></basic-crud>
  <h3>直接使用组件参照</h3>
  <BasicCrudTableSelect label="部门" prop="deptIdName" v-model:formData="formData2" :comProps="{ comType: 'direct', saveFieldMap: { deptIdName: 'name', deptId: 'id' } }"
    :crudProps="{
      apiReferUrl: '/org/deptController/referGrid',
      options: {
        menu: false,
        columns: [
          { prop: 'name', label: '部门名称' },
          { prop: 'id', label: '部门ID' }
        ]
      }
    }">
  </BasicCrudTableSelect>
  {{ formData2 }}
</template>

<script setup>
import { apiRefer } from '@/apis/orgManage/depManage.js'
const visible = ref()
const handleSubmit = (data) => {
  // 获取选中的数据
  console.log(data)
}
const apiListParams = ref({ id: '1' })
const formData = ref({})
const formData2 = ref({})
const option1 = ref({
  menuWidth: 320,
  searchSpan: 8,
  height: '200px',
  selection: true,
  column: [
    {
      label: '用户名',
      prop: 'code',
    },
    {
      label: '姓名',
      prop: 'name',
    },
    {
      label: '内置部门参照',
      prop: 'deptIdName1',
      component: 'BasicCrudTableSelect',
      // 内置参照名称
      dataType: 'dept',
      width: 150,
      comProps: {
        // 参照字段映射，deptIdName为需要上传的字段，name为原数据字段
        // 例如我选择了一个数据拿到的值是{name: '部门1'，id: 1}，但是我接口需要的其实是{deptIdName: '部门1'deptId: 1}
        saveFieldMap: { deptIdName1: 'name', deptId1: 'id' },
        // 定义勾选回显的字段，从saveFieldMap里面取值，默认都是id，可以不写
        // selectedKey: 'id'
      },
      // 这里将表单组件传进去方便回显
      curForm: formData,
      // 这里拿到最新的表单数据进行更新或者其他操作，例如选择参照后联动修改其他表单值
      change: (newV) => {
        formData.value = newV
      },
    },
    {
      label: '自定义部门参照',
      prop: 'deptIdName2',
      component: 'BasicCrudTableSelect',
      // 内置参照名称
      dataType: 'dept',
      width: 150,
      comProps: {
        // 参照字段映射，deptIdName为需要上传的字段，name为原数据字段
        // 例如我选择了一个数据拿到的值是{name: '部门1'，id: 1}，但是我接口需要的其实是{deptIdName: '部门1'deptId: 1}
        saveFieldMap: { deptIdName2: 'name', deptId2: 'id' },
        // 定义勾选回显的字段，从saveFieldMap里面取值，默认都是id，可以不写
        // selectedKey: 'id'
      },
      // crudProps其实就是BasicCrud组件的props
      crudProps: {
        // 自定义接口
        apiReferUrl: '/org/deptController/referGrid',
        // 自定义表格的option配置
        options: {
          menu: false,
          columns: [
            { prop: 'name', label: '部门名称' },
            { prop: 'id', label: '部门ID' }
          ]
        }
      },
      curForm: formData,
      change: (newV) => {
        formData.value = newV
      },
    },
    // 有时候可能获取数据的接口并不标准，你可以自定义一个接口方法
    {
      label: '自定义部门参照(接口自定义)',
      prop: 'deptIdName3',
      component: 'BasicCrudTableSelect',
      // 内置参照名称
      dataType: 'dept',
      width: 150,
      comProps: {
        // 参照字段映射，deptIdName为需要上传的字段，name为原数据字段
        // 例如我选择了一个数据拿到的值是{name: '部门1'，id: 1}，但是我接口需要的其实是{deptIdName: '部门1'deptId: 1}
        saveFieldMap: { deptIdName3: 'name', deptId3: 'id' },
        // 定义勾选回显的字段，从saveFieldMap里面取值，默认都是id，可以不写
        // selectedKey: 'id'
      },
      // crudProps其实就是BasicCrud组件的props
      crudProps: {
        // 自定义接口
        apiSource: { apiGetList: apiRefer },
        // 接口额外参数
        apiListParams,
        // 自定义表格的option配置
        options: {
          menu: false,
          columns: [
            { prop: 'name', label: '部门名称' },
            { prop: 'id', label: '部门ID' }
          ]
        }
      },
      curForm: formData,
      change: (newV) => {
        formData.value = newV
      },
    },
  ],
})
</script>

<style lang='scss' scoped></style>